<template>
	<view class="mynavbar"
		:style="backgrouncolor?`background-color:${backgrouncolor}`:imgurl?`background-image: url(${imgurl});`:''"
		style="background-color: ;">
		<view class="mynavbut-body" :style="bgcolor?`background-color:${bgcolor}`:''" style="height: 170rpx;">
			<view class="mynavbut" :style="gps?`height:${gps+'px'}`:``">
			</view>
			<view class="mynavbar-content">
				<view class="mynavbar-content-body">
					<!-- #ifdef MP-WEIXIN -->
					<view class="content-body-left" style="" v-if="icon">
						<div class="arrow-left" @click="goshang"> <u-icon name="arrow-left" size="19"></u-icon></div>
						<u-line direction="column" :hairline="false" length="16" margin="0 1px"></u-line>
						<div class="arrow-left" @click="goindex"> <u-icon name="home-fill" size="20"></u-icon></div>
					</view>
					<!-- #endif -->
					<span class="content-body-title">{{title}}</span>
					<view class="content-body-right">

					</view>

				</view>
			</view>
		</view>

		<!-- <img :src="imgurl" alt="" class="page-header-img" v-if="imgurl"> -->
	</view>
</template>

<script>
	export default {
		name: "mynavBar",
		props: {
			title: {
				type: String,
				default: ''
			},
			imgurl: {
				type: String
			},
			backgrouncolor: {
				type: String
			},
			icon: {
				type: Boolean,
				default: true
			},
			gps: {
				type: String
			},
			bgcolor: {
				type: String
			}
		},
		data() {
			return {

			};
		},
		methods: {
			goindex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goshang() {
				uni.navigateBack({});
				console.log("传过来的数据", this.bgcolor)
			}
		}

	}
</script>

<style lang="scss">
	.mynavbar {
		width: 100%;
		height: 343rpx;
		background-repeat: no-repeat;
		background-size: 100%;
		// position: fixed;
		// top: 0;

		z-index: -1;


		// .mynavbut {
		// 	height: var(--status-bar-height);
		// }

		.page-header-img {

			// margin-top: -343rpx;
			width: 100%;
			height: 343rpx;
		}

		.mynavbut-body {
			width: 100%;
			// background-color: rgba(247, 247, 247, 1);
			position: fixed;
			z-index: 99;

			.mynavbar-content {
				height: 32px;
				// background-color: #ccc;
				width: 100%;
				box-sizing: border-box;
				padding: 0 20rpx;


				.mynavbar-content-body {

					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					// justify-content: space-between;
					position: relative;


					// background-color: red;
					.content-body-left {
						width: 160rpx;
						height: 60rpx;
						display: flex;
						background: rgba(255, 255, 255, 0.2);
						border-radius: 32rpx;
						opacity: 1;
						border: 1rpx solid rgba(0, 0, 0, 0.2);
						align-items: center;

						.arrow-left {
							width: 49%;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.content-body-title {
						font-size: 36rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #000000;
						line-height: 36rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);

					}
				}
			}
		}



	}
</style>